//获取元素
var getElem = function (selector) {
	return document.querySelector(selector);
}
var getAllElem = function (selector) {
	return document.querySelectorAll(selector);
}

//获取元素的样式
var getCls = function (element) {
	return element.getAttribute('class');
}
//设置元素的样式
var setCls = function (element,cls) {
	return element.setAttribute('class',cls);
}
//添加元素的样式
var addCls = function (element,cls) {
	var baseCls = getCls(element);
	if (baseCls.indexOf(cls) === -1) {
		setCls(element,baseCls +' '+ cls);//注意' '中间的空格
	}
	return;
}
//删除元素的样式
var delCls = function (element,cls) {
	var baseCls = getCls(element);
	if (baseCls.indexOf(cls) > -1){
		//// 更精确的需要用正则表达式 ,因为这里只用于切换 _animate_init所以没事
		setCls(element,baseCls.split(cls).join(' ').replace(/\s+/g,' ') );
	}
}

//第一步:初始化样式 init
var screenAnimateElements = {
	'.screen-1':[
		'.screen-1__heading',
		'.screen-1__heading-descrip',
	],
	'.screen-2':[
		'.screen-2__heading',
		'.screen-2__sub-heading-tip',
		'.screen-2__sub-heading',
		'.screen-2__banner_i_2',
		'.screen-2__banner_i_3',
	],
	'.screen-3':[
		'.screen-3__icon',
		'.screen-3__content__heading',
		'.screen-3__content__tip',
		'.screen-3__content__subheading',
		'.screen-3__content__items',
	],
	'.screen-4':[
		'.screen-4__heading',
		'.screen-4__tips',
		'.screen-4__subheading',
		'.screen-4__items-wrap1',
		'.screen-4__items-wrap2',
		'.screen-4__items-wrap3',
		'.screen-4__items-wrap4',
	],
	'.screen-5':[
		'.screen-5_icon',
		'.screen-5_heading',
		'.screen-5_tip',
		'.screen-5_subheading',
	],
};
//设置屏内元素为初始状态
var setScreenAnimateInit = function(screenCls){
	var screen = document.querySelector(screenCls);//获取当前屏的元素
	var animateElements = screenAnimateElements[screenCls];//需要设置动画的元素
	for (var i = 0;i<animateElements.length;i++){
		var element = document.querySelector(animateElements[i]);
		var baseCls = element.getAttribute('class');
		element.setAttribute('class',baseCls + ' ' + animateElements[i].substr(1) + '_animate_init');
	}
}

//设置播放屏内动画
var playScreenAnimateDone = function(screenCls){
	var screen = document.querySelector(screenCls);//获取当前屏的元素
	var animateElements = screenAnimateElements[screenCls];//需要设置动画的元素
	for (var i = 0;i<animateElements.length;i++){
		var element = document.querySelector(animateElements[i]);
		var baseCls = element.getAttribute('class');

		element.setAttribute('class',baseCls.replace('_animate_init','_animate_done'));
	}
}

window.onload = function () {
	for(k in screenAnimateElements){
		//	优化第一屏动画
		if (k === '.screen-1'){
			continue;
		}
		setScreenAnimateInit(k);
	}
}



//第二步:滚动到哪就播放到哪
var navItems = getAllElem('.header__nav__item');
var outlineItems = getAllElem('.outline__nav');
var switchNavItemsActive = function(idx){
	for (var i =0;i<navItems.length;i++){
		delCls(navItems[i],'header__nav__item__status__active');
	}
	addCls(navItems[idx],'header__nav__item__status__active');

	for (var i =0;i<outlineItems.length;i++){
		delCls(outlineItems[i],'outline__nav__status__active');
	}
	addCls(outlineItems[idx],'outline__nav__status__active');
}
switchNavItemsActive(0);
window.onscroll = function () {
	var top = document.documentElement.scrollTop||document.body.scrollTop;
	//此处注意做兼容处理,有的浏览器可能不支持document.body.scrollTop
	if (top > 640){
		addCls(getElem('.header'),'header_status_white');
		addCls(getElem('.outline'),'outline_status_in');
	}else {
		delCls(getElem('.header'),'header_status_white');
		delCls(getElem('.outline'),'outline_status_in');
		switchNavItemsActive(0);
	}
	if (top > 1) {
		playScreenAnimateDone('.screen-1');

	}
	if (top > 640*1-50) {
		playScreenAnimateDone('.screen-2');
		switchNavItemsActive(1);
	}
	if (top > 640*2-50) {
		playScreenAnimateDone('.screen-3');
		switchNavItemsActive(2);
	}
	if (top > 640*3-50) {
		playScreenAnimateDone('.screen-4');
		switchNavItemsActive(3);
	}
	if (top > 640*4-50) {
		playScreenAnimateDone('.screen-5');
		switchNavItemsActive(4);
	}

}

//第三步:双向定位

var setNavJump = function (i,lib) {
	var item = lib[i];
	item.onclick = function () {
		document.body.scrollTop = i*640;
		document.documentElement.scrollTop = i*640;
	//	双向定位的兼容处理,由于document.body.scrollTop = i*640;可能不生效
	}
}

for (var i =0;i <navItems.length;i++) {
	setNavJump(i,navItems);
}

for (var i =0;i <outlineItems.length;i++) {
	setNavJump(i,outlineItems);
}

//第四步:滑动门特效
var navTip = getElem('.header_nav_tip');
var setTip = function (idx,lib) { //idx:索引 lib:导航项
	lib[idx].onmouseover = function () {
		console.log(this,idx);
		navTip.style.left = (idx * 88) + 'px';
	}

	var activeIdx = 0;
	lib[idx].onmouseout = function () {
		console.log(this,idx);
		for (var i =0;i<lib.length;i++){
			if (getCls(lib[i]).indexOf('header__nav__item__status__active')>-1) {
				activeIdx = i;
				break;
			}
		}
		navTip.style.left = (activeIdx * 88) + 'px';
	}
}

for (var i = 0;i < navItems.length;i++) {
	setTip(i,navItems);
}

//播放第一屏动画
setTimeout(function () {
	playScreenAnimateDone('.screen-1');
},200)